<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <el-form-item label="公告标题" prop="noticeTitle">
                <el-input
                    v-model="queryParams.noticeTitle"
                    placeholder="请输入公告标题"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="类型" prop="noticeType">
                <el-select
                    v-model="queryParams.noticeType"
                    placeholder="公告类型"
                    clearable
                    size="small"
                >
                    <el-option
                        v-for="dict in typeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="cyan"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    >删除</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="noticeList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column label="序号"  prop="noticeId" width="100" /> -->
            <el-table-column
                label="公告标题"
                prop="noticeTitle"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="公告类型"
                prop="noticeType"
                :formatter="typeFormat"
                width="100"
            />
            <!-- <el-table-column
        label="状态"

        prop="status"
        :formatter="statusFormat"
        width="100"
      /> -->
            <el-table-column label="创建者" prop="nickName" width="100" />
            <el-table-column label="创建时间" prop="createTime" width="100">
                <template slot-scope="scope">
                    <span>{{
                        parseTime(scope.row.createTime, "{y}-{m}-{d}")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改公告对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="80%"
            append-to-body
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="公告标题" prop="noticeTitle">
                            <el-input
                                v-model="form.noticeTitle"
                                maxlength="50"
                                show-word-limit
                                placeholder="请输入公告标题"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="公告类型" prop="noticeType">
                            <el-select
                                v-model="form.noticeType"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="dict in typeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"> </el-col>
                    <el-col :span="24">
                        <el-form-item label="内容">
                            <editor
                                v-model="form.noticeContent"
                                style="
                                    min-height: 192px;
                                    max-height: 400px;
                                    overflow-y: auto;
                                "
                                :min-height="192"
                                :max-height="400"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="文件">
                            <el-upload
                                class="upload-demo"
                                accept
                                list-type="picture"
                                :show-file-list="false"
                                ref="upload"
                                :file-list="fileList"
                                action=""
                                :on-remove="handleChange"
                                :on-change="handleChange"
                                :auto-upload="false"
                            >
                                <el-button
                                    style="margin-left: 20px;"
                                    slot="trigger"
                                    size="small"
                                    type="primary"
                                    >选取文件</el-button
                                >
                            </el-upload>
                            <el-table
                                :data="fileList"
                                style="margin-left: 20px; width: 50vw"
                            >
                                <el-table-column label="文件名称">
                                    <template slot-scope="scope">
                                        {{
                                            scope.row.name.substring(
                                                0,
                                                scope.row.name.lastIndexOf(".")
                                            )
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="文件类型">
                                    <template slot-scope="scope">
                                        {{
                                            scope.row.name.substring(
                                                scope.row.name.lastIndexOf(
                                                    "."
                                                ) + 1,
                                                scope.row.name.length
                                            )
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    width="100"
                                    class-name="small-padding fixed-width"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            size="mini"
                                            type="text"
                                            icon="el-icon-delete"
                                            @click="
                                                DeleteFile(
                                                    scope.row,
                                                    scope.$index
                                                )
                                            "
                                            >删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发送给" prop="scopeType">
                            <el-select
                                v-model="form.scopeType"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="dict in MessageType"
                                    :key="dict.dictValue"
                                    clearable
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <template>
                            <el-form-item
                                label="部门"
                                v-show="form.scopeType == 'DEPT'"
                            >
                                <el-checkbox
                                  v-model="deptCheckStrictly"
                                  @change="handleCheckedTreeConnect($event, 'dept')"
                                  v-if="false"
                                >父子联动</el-checkbox>
                                <el-tree
                                    style="
                                        height: 300px;
                                        overflow-y: auto;
                                        width: 700px;
                                    "
                                    class="tree-border"
                                    :data="deptOptions"
                                    show-checkbox
                                    v-model="queryParams.scope"
                                    highlight-current
                                    default-expand-all
                                    ref="dept"
                                    node-key="id"
                                    :check-strictly="!deptCheckStrictly"
                                    :default-expanded-keys="treeData"
                                    empty-text="加载中，请稍后"
                                    :props="defaultProps"
                                ></el-tree>
                            </el-form-item>
                            <el-form-item
                                label="角色"
                                v-show="form.scopeType == 'ROLE'"
                            >
                                <el-tree
                                    style="
                                        height: 300px;
                                        overflow-y: auto;
                                        width: 700px;
                                    "
                                    class="tree-border"
                                    :data="roleList"
                                    node-key="roleKey"
                                    show-checkbox
                                    highlight-current
                                    default-expand-all
                                    ref="depts"
                                    :check-strictly="!deptCheckStrictly"
                                    empty-text="加载中，请稍后"
                                    :props="roledefaultProps"
                                ></el-tree>
                            </el-form-item>
                        </template>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";
import listRole from "@/api/system/role";
import {
    listNotice,
    getNotice,
    delNotice,
    addNotice,
    updateNotice,
    exportNotice,
} from "@/api/system/notice";
import Editor from "@/components/Editor";
import { treeselect } from "@/api/system/dept";
import { getToken } from "@/utils/auth";
import { uploadFile } from "@/api/system/upload.js";

export default {
    name: "Notice",
    components: {
        Editor,
    },
    data() {
        return {
            fileList: [],
            // 角色表格数据
            roleList: [],
            // 日期范围
            dateRange: [],

            defaultProps: {
                children: "children",
                label: "label",
            },
            roledefaultProps: {
                children: "children",
                label: "roleName",
            },
            treeData: [],
            // 部门树选项
            deptOptions: undefined,
            // 消息类型列表
            MessageType: [
                {
                    dictLabel: "公开",
                    dictValue: "OPEN",
                },
                {
                    dictLabel: "指定部门",
                    dictValue: "DEPT",
                },
                {
                    dictLabel: "指定角色",
                    dictValue: "ROLE",
                },
            ],
            deptCheckStrictly: true,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 公告表格数据
            noticeList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 类型数据字典
            statusOptions: [],
            // 状态数据字典
            typeOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                noticeType: "",
                deptId: null,
                roleId: [],
                noticeTitle: undefined,
                createBy: undefined,
                status: undefined,
            },
            base_url: process.env.VUE_APP_BASE_API,
            // 表单参数
            form: {
                noticeContent: undefined,
                noticeId: undefined,
                noticeTitle: undefined,
                noticeType: undefined,
                scopeType: undefined,
                status: undefined,
                files: [],
                scope: [],
            },
            // 表单校验
            rules: {
                noticeTitle: [
                    {
                        required: true,
                        message: "公告标题不能为空",
                        trigger: "blur",
                    },
                ],
                noticeType: [
                  { required: true, message: "公告类型不能为空", trigger: "change" }
                ] ,
                scopeType: [
                  { required: true, message: "发送对象不能为空", trigger: "change" }
                ]
            },
        };
    },
    created() {
        this.getList();
        this.getDicts("sys_notice_status").then((response) => {
            this.statusOptions = response.data;
        });
        this.getDicts("sys_notice_type").then((response) => {
            this.typeOptions = response.data;
        });
        this.GetRoleList();
        this.getTreeselects();
        this.getTreeselect();
    },
    methods: {
        //文件列表变化
        handleChange(res, fileList) {
            this.fileList = fileList;
        },
        DeleteFile(data, index) {
            this.fileList = this.fileList.filter((item) => {
                if (item.uid == data.uid) {
                } else {
                    return item;
                }
            });
        },
        // 所有部门节点数据
        getDeptAllCheckedKeys() {
            // 目前被选中的部门节点
            let checkedKeys = this.$refs.dept.getCheckedKeys();
            // 半选中的部门节点
            let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            return checkedKeys.join(",");
        },
        // 所有部门节点数据
        getRoleAllCheckedKeys() {
            // 目前被选中的部门节点
            let checkedKeys = this.$refs.depts.getCheckedKeys();
            // 半选中的部门节点
            let halfCheckedKeys = this.$refs.depts.getHalfCheckedKeys();
            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            return checkedKeys.join(",");
        },
        /** 查询角色列表 */
        GetRoleList() {
            axios
                .get(`${this.base_url}/system/role/list`, {
                    headers: {
                        Authorization: "Bearer " + getToken(),
                    },
                })
                .then((response) => {
                    let roleLists = [];
                    response.data.rows.forEach((item) => {
                        let items = item;
                        items.children = [];
                        roleLists.push(items);
                    });
                    this.roleList = roleLists;
                });
        },
        getTreeselects() {
            treeselect().then((response) => {
                response.data.forEach((element) => {
                    this.treeData.push(element.id);
                });
                this.deptOptions = response.data;
            });
        },
        // 树权限（父子联动）
        handleCheckedTreeConnect(value, type) {
            if (type == "menu") {
                this.menuCheckStrictly = value ? true : false;
            } else if (type == "dept") {
                this.deptCheckStrictly = value ? true : false;
            }
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
            treeselect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        /** 查询公告列表 */
        getList() {
            this.loading = true;
            listNotice(this.queryParams).then((response) => {
                this.noticeList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 公告状态字典翻译
        statusFormat(row, column) {
            return this.selectDictLabel(this.statusOptions, row.status);
        },
        // 公告状态字典翻译
        typeFormat(row, column) {
            return this.selectDictLabel(this.typeOptions, row.noticeType);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                noticeId: undefined,
                noticeTitle: undefined,
                noticeType: undefined,
                noticeContent: undefined,
                status: "0",
                scopeType: undefined,
                files: [],
                scope: [],
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.noticeId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.form = {
                noticeContent: undefined,
                noticeId: undefined,
                noticeTitle: undefined,
                noticeType: undefined,
                scopeType: undefined,
                status: undefined,
                files: [],
                scope: [],
            },
            this.fileList = []
            this.title = "添加公告";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const noticeId = row.noticeId || this.ids;
            getNotice(noticeId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改公告";
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            if (this.fileList.length > 0) {
                let param = new FormData();
                param.append("key", "file");
                this.fileList.forEach((item) => {
                    param.append("file", item.raw);
                });
                uploadFile(param)
                    .then((res) => {
                        this.form.files = res.data;
                        if (this.form.scopeType == "OPEN") {
                            this.form.scope = "NOTICE_ALL_";
                        } else if (this.form.scopeType == "ROLE") {
                            this.form.scope = this.getRoleAllCheckedKeys();
                        } else {
                            this.form.scope = this.getDeptAllCheckedKeys();
                        }
                        this.$refs["form"].validate((valid) => {
                            if (valid) {
                                if (this.form.noticeId != undefined) {
                                    updateNotice(this.form).then((response) => {
                                        this.msgSuccess("修改成功");
                                        this.open = false;
                                        this.getList();
                                    });
                                } else {
                                    addNotice(this.form).then((response) => {
                                        this.msgSuccess("新增成功");
                                        this.open = false;
                                        this.getList();
                                    });
                                }
                            }
                        });
                    })
                    .catch((e) => {});
            }else{
                if (this.form.scopeType == "OPEN") {
                    this.form.scope = "NOTICE_ALL_";
                } else if (this.form.scopeType == "ROLE") {
                    this.form.scope = this.getRoleAllCheckedKeys();
                } else {
                    this.form.scope = this.getDeptAllCheckedKeys();
                }
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        if (this.form.noticeId != undefined) {
                            updateNotice(this.form).then((response) => {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addNotice(this.form).then((response) => {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            }

        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const noticeIds = row.noticeId || this.ids;
            this.$confirm(
                '是否确认删除公告编号为"' + noticeIds + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    return delNotice(noticeIds);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                });
        },
    },
};
</script>
